<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>4. DOM 和 BOM | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/45.00df9f15.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端架构</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端深入理解</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端入门</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/front-end/front-end-1.html" class="sidebar-link">1. 什么是前端</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html" class="sidebar-link">2. 编写页面</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-3.html" class="sidebar-link">3. HTML 和 CSS</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html" aria-current="page" class="active sidebar-link">4. DOM 和 BOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#什么是-dom" class="sidebar-link">什么是 DOM</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#dom-解析" class="sidebar-link">DOM 解析</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#dom-接口" class="sidebar-link">DOM 接口</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#dom-事件流" class="sidebar-link">DOM 事件流</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#虚拟-dom" class="sidebar-link">虚拟 DOM</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#参考" class="sidebar-link">参考</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#什么是-bom" class="sidebar-link">什么是 BOM</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#bom-与-dom" class="sidebar-link">BOM 与 DOM</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#window-对象" class="sidebar-link">window 对象</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html#参考-2" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-5.html" class="sidebar-link">5. Javascript</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html" class="sidebar-link">6. 认识浏览器</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html" class="sidebar-link">7. 代码调试</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-8.html" class="sidebar-link">8. Ajax 和 http</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-9.html" class="sidebar-link">9. 网络协议基础</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-10.html" class="sidebar-link">10. 理解 HTTP 协议</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>Javascript 包括三块：ECMAScript、DOM 和 BOM，本文主要介绍 DOM 和 BOM。</p> <h1 id="dom"><a href="#dom" class="header-anchor">#</a> DOM</h1> <h2 id="什么是-dom"><a href="#什么是-dom" class="header-anchor">#</a> 什么是 DOM</h2> <p>文档对象模型 (<code>DOM</code>) 是<code>HTML</code>和<code>XML</code>文档的编程接口。<br> <code>DOM</code>将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。</p> <p>尽管通常会使用<code>JavaScript</code>来访问<code>DOM</code>， 但它并不是<code>JavaScript</code>的一部分，它也可以被其他语言使用。</p> <h2 id="dom-解析"><a href="#dom-解析" class="header-anchor">#</a> DOM 解析</h2> <p>我们常见的<code>HTML</code>元素，在浏览器中会被解析成节点：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/ct_htmltree.gif" alt="image"></p> <p>在控制台，我们也能比较清晰地看到这样的层级关系：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%7BEA4AA8AF-DB12-4B48-8A6A-E71099D1A942%7D.png" alt="image"></p> <p><strong>节点树中的节点彼此拥有层级关系。</strong><br>
父（<code>parent</code>）、子（<code>child</code>）和同胞（<code>sibling</code>）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。</p> <ul><li>在节点树中，顶端节点被称为根（<code>root</code>）</li> <li>每个节点都有父节点、除了根（它没有父节点）</li> <li>一个节点可拥有任意数量的子</li> <li>同胞是拥有相同父节点的节点</li></ul> <p><strong>通过<code>HTML DOM</code>，树中的所有节点均可通过<code>JavaScript</code>进行访问。所有<code>HTML</code>元素（节点）均可被修改，也可以创建或删除节点。</strong></p> <h2 id="dom-接口"><a href="#dom-接口" class="header-anchor">#</a> DOM 接口</h2> <p><code>DOM</code>接口主要用于操作<code>DOM</code>节点，如常见的增删查改。</p> <p>在 web 和 XML 页面脚本中使用 DOM 时，一些常用的 API 如下：</p> <ul><li><code>document.getElementById(id)</code>：根据<code>id</code>获取元素</li> <li><code>document.getElementsByTagName(name)</code>：根据<code>tag</code>获取元素</li> <li><code>document.createElement(name)</code>：创建元素</li> <li><code>parentNode.appendChild(node)</code>：添加子元素</li> <li><code>element.innerHTML</code>：设置/获取元素内容</li> <li><code>element.styles</code>：设置/获取元素样式</li> <li><code>element.setAttribute()</code>：设置元素属性值</li> <li><code>element.getAttribute()</code>：获取元素属性值</li> <li><code>element.addEventListener()</code>：添加事件绑定</li></ul> <p>通常什么时候会用呢，最常见的便是列表的维护，包括增加新的选项、删除某个、修改某个等等。</p> <p>在浏览器兼容性问题很多的时候，我们常常会使用<code>jQuery</code>来进行些<code>DOM</code>操作，如今兼容性问题逐渐变少，大家更倾向于用原生<code>DOM</code>接口来进行操作。</p> <h2 id="dom-事件流"><a href="#dom-事件流" class="header-anchor">#</a> DOM 事件流</h2> <p>事件流所描述的就是从页面中接受事件的顺序。<br> <strong>DOM 事件流（<code>event flow</code>）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。</strong></p> <ol><li>捕获阶段：一开始从文档的根节点流向目标对象；</li> <li>目标阶段：然后在目标对向上被触发；</li> <li>冒泡阶段：之后再回溯到文档的根节点。</li></ol> <h3 id="事件捕获"><a href="#事件捕获" class="header-anchor">#</a> 事件捕获</h3> <p>当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。</p> <p>在事件捕获的概念下在<code>p</code>元素上发生<code>click</code>事件的顺序应该是<code>document -&gt; html -&gt; body -&gt; div -&gt; p</code>。</p> <h3 id="事件冒泡"><a href="#事件冒泡" class="header-anchor">#</a> 事件冒泡</h3> <p>与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。</p> <p>在事件冒泡的概念下在<code>p</code>元素上发生<code>click</code>事件的顺序应该是<code>p -&gt; div -&gt; body -&gt; html -&gt; document</code>。</p> <p><strong><code>DOM</code>标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发 dom 事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。</strong></p> <p>不同的浏览器对此有着不同的实现，IE10 及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari 等浏览器则同时存在。</p> <p>曾经踩过 IE9 中<code>button</code>的坑，例如<code>&lt;button&gt;&lt;span&gt;&lt;/span&gt;&lt;/button&gt;</code>，如果我们分别在<code>button</code>以及<code>span</code>里均绑定<code>click</code>事件，则<code>span</code>的事件不会被触发。不知道这个跟事件机制是否相关呢？</p> <p><strong>addEventListener</strong> <code>addEventListener</code>的第三个参数就是为冒泡和捕获准备的.
<code>addEventListener</code>有三个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">,</span> useCapture<span class="token punctuation">)</span>
</code></pre></div><ul><li><code>event</code>：需要绑定的事件</li> <li><code>function</code>：触发事件后要执行的函数</li> <li><code>useCapture</code>：默认值是 false，表示在事件冒泡阶段调用事件处理函数。如果参数为 true，则表示在事件捕获阶段调用处理函数。</li></ul> <h3 id="事件委托"><a href="#事件委托" class="header-anchor">#</a> 事件委托</h3> <p>基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理。<br>
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。</p> <p>这样能解决什么问题呢？</p> <ol><li>绑定子元素会绑定很多次的绑定，而绑定父元素只需要一次绑定。</li> <li>将事件委托给父节点，这样我们对子元素的增加和删除、移动等，都不需要重新进行事件绑定。</li></ol> <p>很常见的就是我们有个列表，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素或者<code>document</code>，不管我们新增、删除、更新选项，都不需手动去绑定和移除事件。</p> <p>最常在<code>jQuery</code>中使用事件委托：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#my-list&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">delegate</span><span class="token punctuation">(</span><span class="token string">&quot;button&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// &quot;$(this)&quot;是被click的元素</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;you clicked a button&quot;</span><span class="token punctuation">,</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>现在我们基本上都使用框架了，我们可以随意地在元素上绑定事件，如 Vue 中<code>&lt;div @click=&quot;myClickEvent&quot; /&gt;</code>，因为框架会帮我们用事件委托的方式处理掉，大部分都会绑定在最外层初始化的<code>id</code>元素，或者是<code>document</code>吧。</p> <h2 id="虚拟-dom"><a href="#虚拟-dom" class="header-anchor">#</a> 虚拟 DOM</h2> <p>一个<code>DOM</code>节点元素，其实是很复杂的，包含了很多的属性和方法。</p> <p>我们来简单打印一下一个<code>DOM</code>元素：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512633321%281%29.png" alt="image"></p> <p>看到右边的滚动条了没，有如此之多的属性。</p> <p>所以随着应用程序越来越复杂，<code>DOM</code>操作越来越频繁，需要监听事件和在事件回调用更新页面的 DOM 操作也越来越多，性能消耗则会比较大。于是乎，虚拟<code>DOM</code>的想法便被人提出并实现了。</p> <p>虚拟<code>DOM</code>其实是用来模拟真实<code>DOM</code>的中间产物，主要包括以下功能：</p> <p><strong>1. 用<code>JS</code>对象模拟<code>DOM</code>树，简化<code>DOM</code>对象。</strong></p> <p>简单来说，就是用一个对象模拟，保留主要的一些<code>DOM</code>属性，其他的则去掉。</p> <p><strong>2. 使用虚拟<code>DOM</code>，结合操作<code>DOM</code>的接口，来生成真实<code>DOM</code>。</strong></p> <p>使用假<code>DOM</code>生成真<code>DOM</code>，同时保持真实<code>DOM</code>对象的引用，以便 3 步骤的执行。</p> <p><strong>3. 更新<code>DOM</code>时，比较两棵虚拟<code>DOM</code>树的差异，局部更新真实<code>DOM</code>。</strong></p> <p>这个就比较有意思，可以根据数据的变化，来最小化地移动、替换、删除原有的<code>DOM</code>元素。</p> <p>结合使用以上功能，便能在复杂应用中更好地维护了。而我们现在很多的前端框架，例如 Angular、React、Vue 等，都为了给开发者提供便捷的数据绑定机制、高效的 DOM 更新机制而做了不少的工作，更多的可以参考<a href="/front-end-playground/vue/vue-for-everyone/vue-for-everyone-1.html">《如何理解前端和 Vue》</a>一文。</p> <h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <ul><li><a href="http://www.jb51.net/article/55851.htm" target="_blank" rel="noopener noreferrer">《javascript 学习笔记（三）BOM 和 DOM 详解》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noopener noreferrer">DOM | MDN<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://coolshell.cn/articles/9666.html" target="_blank" rel="noopener noreferrer">《浏览器的渲染原理简介》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://www.cnblogs.com/bfgis/p/5460191.html" target="_blank" rel="noopener noreferrer">《JavaScript 详说事件机制之冒泡、捕获、传播、委托》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h1 id="bom"><a href="#bom" class="header-anchor">#</a> BOM</h1> <h2 id="什么是-bom"><a href="#什么是-bom" class="header-anchor">#</a> 什么是 BOM</h2> <p><code>BOM</code>是<code>Browser Object Model</code>，浏览器对象模型。主要处理浏览器窗口和框架，不过通常浏览器特定的<code>JavaScript</code>扩展都被看做<code>BOM</code>的一部分。<br> <code>BOM</code>是各个浏览器厂商根据<code>DOM</code>在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同。</p> <p><code>javacsript</code>是通过访问<code>BOM</code>对象来访问、控制、修改客户端(浏览器)。</p> <h2 id="bom-与-dom"><a href="#bom-与-dom" class="header-anchor">#</a> BOM 与 DOM</h2> <p><code>DOM</code>（<code>Document Object Model</code>文档对象模型）是为了操作文档出现的<code>API</code>，包括<code>document</code>。<br> <code>BOM</code>（<code>Browser Object Model</code>浏览器对象模型）是为了操作浏览器出现的<code>API</code>，包括<code>window</code>/<code>location</code>/<code>history</code>等。</p> <p>由于<code>BOM</code>的<code>window</code>包含了<code>document</code>，换个角度讲，<code>BOM</code>包含了<code>DOM</code>(对象)，浏览器提供出来给予访问的是<code>BOM</code>对象，从<code>BOM</code>对象再访问到<code>DOM</code>对象，从而<code>js</code>可以操作浏览器以及浏览器读取到的文档。</p> <p>以上都是一些默认或是传说，但其实浏览器对象模型<code>BOM</code>尚无正式标准。</p> <h2 id="window-对象"><a href="#window-对象" class="header-anchor">#</a> window 对象</h2> <p>所有浏览器都支持<code>window</code>对象。它表示浏览器窗口。<br>
所有<code>JavaScript</code>全局对象、函数以及变量均自动成为<code>window</code>对象的成员。<br>
全局变量是<code>window</code>对象的属性，全局函数是<code>window</code>对象的方法。</p> <p><code>window</code>对象包括：</p> <ul><li><code>window.screen</code>对象：包含有关用户屏幕的信息</li> <li><code>window.location</code>对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面</li> <li><code>window.history</code>对象：浏览历史的前进后退等</li> <li><code>window.navigator</code>对象：常常用来获取浏览器信息、是否移动端访问等等</li> <li><code>JavaScript</code>消息框：<code>alert()</code>等</li> <li><code>JavaScript</code>计时：<code>setTimeout()</code>等</li></ul> <h2 id="参考-2"><a href="#参考-2" class="header-anchor">#</a> 参考</h2> <p><a href="http://www.jb51.net/article/55851.htm" target="_blank" rel="noopener noreferrer">《javascript 学习笔记（三）BOM 和 DOM 详解》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h1 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h1> <p>DOM 和 BOM，会在我们日常实战中会经常用到，但是很多时候我们都只觉得自己在使用 Javascript。<br>
当我们开始写 node.js 的时候，才会发现其中很多的不一致吧~</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/front-end/front-end-4.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-basic/front-end/front-end-3.html" class="prev">
          3. HTML 和 CSS
        </a></span> <span class="next"><a href="/front-end-playground/front-end-basic/front-end/front-end-5.html">
          5. Javascript
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-2799" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty2.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/45.00df9f15.js" defer></script>
  </body>
</html>
